<template>
  <div>
    <h4>欢迎光临_vue开发的收银系统_水果店</h4>

    <table>
      <tr>
        <th>苹果{{ ping }}￥/斤，折扣{{ zhe }}折</th>
      </tr>
      <tr>
        <th>
          <span>请输入你要购买斤数</span
          ><input type="number" v-model.number="bianliang" />
        </th>
      </tr>
      <tr>
        <th><button @click="btn">结账买单</button></th>
      </tr>
      <tr>
        <th>
          <p>
            结账单:总价:{{ zong }}￥元，折后价:{{ discount }}￥元 省了:{{
              reflect
            }}￥元
          </p>
        </th>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ping: 10,
      zhe: 8,
      bianliang: "",
      zong: "",
      discount: "",
    };
  },
  methods: {
    btn() {
      this.zong = this.bianliang * this.ping;
      this.discount = this.zong * (this.zhe / 10);
      this.reflect = this.zong - this.discount;
    },
  },
};
</script>

<style>
div {
  text-align: center;
  margin: 100px auto;
  width: 700px;
}
tr,
th {
  border: solid 1px #000;
}
table {
  width: 100%;
  text-align: center;
  border: solid 1px pink;
}
</style>